.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--gray-20);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: 2.4s skeleton-slide ease-in-out infinite;
    will-change: transform-origin, transform, opacity;
    background-color: var(--gray-30);
  }
}

@keyframes skeleton-slide {
  0% {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.3;
  }

  20% {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 1;
  }

  28% {
    transform: scaleX(1);
    transform-origin: right;
  }

  51% {
    transform: scaleX(0);
    transform-origin: right;
  }

  58% {
    transform: scaleX(0);
    transform-origin: right;
  }

  82% {
    transform: scaleX(1);
    transform-origin: right;
  }

  83% {
    transform: scaleX(1);
    transform-origin: left;
  }

  96% {
    transform: scaleX(0);
    transform-origin: left;
  }

  100% {
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.3;
  }
}
